<template>
	<view class="partner">

		<view class="type_input flex_r_between" @click="show_category = true">
			<view class="label flex_center">
				<text>搭子类型</text>
			</view>
			<view class="container flex_center">
				<view class="view" :id="type_id ? 'have' : ''">
					{{ type_pname || ''}} {{ type_name || '请选择'}}
				</view>
				<image :src="`${$util.prefix('public/arrow-right-fill.png')}`"></image>
			</view>
		</view>

		<view class="container" v-if="type_pid != 6">

			<view class="input flex_center">
				<view class="title">活动标题</view>
				<view class="inp_content flex_center">
					<input type="text" placeholder="请输入活动标题" placeholder-class="input-placeholder" v-model="play.title"
						maxlength="50" />
					<text>{{ play.title.length }}/50</text>
				</view>
			</view>

			<view class="content">
				<view class="header flex_center">
					<text>活动图片</text>
					<view>首张为活动展示图</view>
				</view>
				<view class="image flex_center">

					<view class="photos flex_c" v-if="images.length < 9" @click="chooseImage">
						<image :src="$util.prefix('partner/partner_image_up.png')" mode="aspectFill"></image>
					</view>

					<view class="image_item" v-for="(item,index) in images" :key="index">
						<image :src="item" mode="aspectFill" @click="$util.previewImage(images,index)"></image>
						<view class="detele flex_r_around" @click="onDeleteImage(index)">
							<u-icon name="close-circle-fill" color="#FD2A53" size="40rpx"></u-icon>
						</view>
					</view>

				</view>
			</view>

			<view class="content">
				<view class="header flex_center">
					<text>活动简介</text>
					<view></view>
				</view>

				<view class="textarea">
					<textarea placeholder="请输入活动详情，如活动时间、地点和活动内容" placeholder-class="input-placeholder"
						v-model="play.intro" maxlength="300"></textarea>
					<view>{{play.intro.length}}/300</view>
				</view>
			</view>

			<view class="list">

				<view class="item flex_center">
					<view class="left">活动人数</view>
					<view class="right flex_center">
						<input type="number" placeholder="请输入活动人数" placeholder-class="input-placeholder" maxlength="3"
							v-model="play.people_number" />
					</view>
				</view>

				<view class="item flex_center" @click="end_time_show = true">
					<view class="left">截止时间</view>
					<view class="right flex_center">
						<text class="hidden" :id="play.end_time ? 'have' : ''">{{ play.end_time || '不限'}}</text>
						<u-icon name="arrow-right" size="24rpx" color="#999999"></u-icon>
					</view>
				</view>

				<view class="item flex_center">
					<view class="left">活动是否收费</view>
					<view class="right flex_center">
						<text></text>
						<switch :checked="is_not_free" @change="freeChange" color="#FD2A53"
							style="transform:scale(0.7)" />
					</view>
				</view>

				<view class="item flex_center" v-if="is_not_free">
					<view class="left">活动价格</view>
					<view class="right flex_center">
						<input type="number" placeholder="请输入付费金额" placeholder-class="input-placeholder" maxlength="10"
							v-model="play.active_price" @input="inputVer" />
						<view class="red">元</view>
					</view>
				</view>

				<!-- DK WX 2024.11.15 不要选择圈子 -->
				<!-- <view class="item flex_center">
					<view class="left">选择发布的圈子</view>
					<view class="right flex_center">
						<text class="hidden">请选择</text>
						<u-icon name="arrow-right" size="24rpx" color="#999999"></u-icon>
					</view>
				</view> -->

				<view class="item flex_center" @click="chooseLocation">
					<view class="left">活动位置</view>
					<view class="right flex_center">
						<text class="hidden"
							:id=" play.active_address ? 'have' : '' ">{{play.active_address || '请选择'}}</text>
						<u-icon name="arrow-right" size="24rpx" color="#999999"></u-icon>
					</view>
				</view>

			</view>

			<view class="btn" @click="onSubmitPlay">保存</view>

		</view>

		<view class="container" v-else>
			<view class="input flex_center">
				<view class="title">游戏名称</view>
				<view class="inp_content flex_center">
					<input type="text" placeholder="请输入游戏名称" placeholder-class="input-placeholder" maxlength="30"
						v-model="game.title" />
				</view>
			</view>

			<!-- DK WX 2024.11.15 不要开黑平台 -->
			<!-- <view class="input flex_center">
				<view class="title">开黑平台</view>
				<view class="inp_content flex_center">
					<view class="view">请选择</view>
					<u-icon name="arrow-right" size="24rpx" color="#999999"></u-icon>
				</view>
			</view> -->

			<view class="content">
				<view class="header flex_center">
					<text>实力展示</text>
				</view>
				<view class="sign flex_center">
					<view class="item flex_center">
						<u-icon name="checkmark" color="#11AE52" size="28rpx"></u-icon>
						<text>清晰完整</text>
					</view>
					<view class="item flex_center">
						<u-icon name="checkmark" color="#11AE52" size="28rpx"></u-icon>
						<text>当前国服段位:如钻石</text>
					</view>
				</view>
				<view class="game flex_r_between">
					<image style="border-radius: 12rpx;" :src="game.image" v-if="game.image" mode="aspectFill"
						@click="chooseGameImage"></image>
					<image :src="$util.prefix('partner/partner_game_up.png')" v-else @click="chooseGameImage"></image>
					<image :src="$util.prefix('partner/partner_game_img.png')"
						@click="$util.previewImage([$util.prefix('partner/partner_game_img.png')])">
					</image>
				</view>
			</view>

			<view class="content">
				<view class="header flex_center">
					<text>个人特色</text>
					<view></view>
				</view>
				<view class="sign flex_center">
					<text>建议描述你的游戏，性格，社交特质</text>
				</view>
				<view class="textarea">
					<textarea placeholder="可描述介绍你的游戏能力，如：最高成绩、特色英雄出装等" placeholder-class="input-placeholder"
						maxlength="9999" v-model="game.intro">
					</textarea>
				</view>
			</view>

			<view class="input flex_center">
				<view class="title">付费金额</view>
				<view class="inp_content flex_center">
					<input type="number" placeholder="请输入付费金额" placeholder-class="input-placeholder" maxlength="10"
						v-model="game.active_price" @input="inputVerGame" />
					<text class="red">元/局</text>
				</view>
			</view>

			<view class="btn" @click="onSubmitGame">保存</view>

		</view>

		<!-- 选择日期 -->
		<u-datetime-picker :show="end_time_show" mode="date" :minDate="now" @close="end_time_show = false"
			@cancel="onCancelDate" @confirm="onEndTime" cancelText="不限" :closeOnClickOverlay="true"
			cancelColor="#FD2A53"></u-datetime-picker>

		<u-modal :show="show_back" title="提示" content='发布成功' :closeOnClickOverlay="true" cancelText="我知道了"
			:showConfirmButton='false' :showCancelButton='true' @close="show_back = false"
			@cancel="show_back = false"></u-modal>
			
			
		<u-popup :safeAreaInsetBottom="false" :show="show_category" :round="10" mode="bottom" @close="show_category = false">
			<view class="circle_popup">
				<category @toCategory="toCategory" @cancelCategory="cancelCategory"></category>
			</view>
		</u-popup>

		<w-compress ref='wCompress' />
		
	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue';
	import category from './category.vue';
	export default {
		components: {
			WCompress,
			category,
		},
		data() {
			return {
				
				show_category: false,
				
				tab: 1,
				// 活动图片
				images: [],
				type_pid: 0,
				type_pname: '',
				type_id: 0,
				type_name: '',
				play: {
					type_pid: 0,
					type_id: 0,
					// 活动封面
					image: '',
					// 活动标题
					title: '',
					// 活动图片
					images: '',
					// 活动简介
					intro: '',
					// 活动人数
					people_number: '',
					// 截止时间
					end_time: 0,
					// 报名费用
					active_price: '',
					// 活动省 市 区 地址 经纬度
					active_province: '',
					active_city: '',
					active_district: '',
					active_address: '',
					active_lng: '',
					active_lat: '',
				},

				// 日期
				end_time_show: false,
				// 当前日期时间戳
				now: 0,

				is_not_free: false,

				show_back: false,

				// 游戏板块
				game: {
					type_pid: 0,
					type_id: 0,
					type: 2,
					// 标题
					title: '',
					// 段位展示
					// 2024.11.15  段位展示 DK: image 和 images 传一样的
					image: '',
					images: '',
					// 个人特色
					intro: '',
					// 费用
					active_price: '',
				},

				tag: [],
				
				
			}
		},
		methods: {
			// 选择图片上传
			chooseImage() {
				this.$native.authorize('photos');
				var count = 9 - this.images.length;
				uni.chooseImage({
					count: count,
					success: (file) => {
						file.tempFilePaths.forEach(element => {
							this.$refs.wCompress.start(element, {
								pixels: 2000000, // 最大分辨率，默认二百万
								quality: 0.6, // 压缩质量，默认0.8
								type: 'png', // 图片类型，默认jpg
								// base64: false, // 是否返回base64，默认false，非H5有效
							}).then(url => {
								this.$upload(url, {
									type: 'picture'
								}).then(res => {
									if (res.status == 2 || res.status == 1) {
										this.images.push(res.result.url);
									} else {
										this.$util.msg(res.msg);
									}
								});
							});

						})

					}
				})
			},

			// 删除
			onDeleteImage(index) {
				this.images.splice(index, 1);
			},

			// 是否免费
			freeChange(e) {
				this.is_not_free = e.detail.value;
				this.play.active_price = '';
			},

			// 选择截止日期
			onEndTime(e) {
				this.play.end_time = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.end_time_show = false;
			},

			// 不限日期
			onCancelDate() {
				this.play.end_time = 0;
				this.end_time_show = false;
			},

			// 选择发布位置
			chooseLocation() {
				// this.$native.authorize('location');
				uni.showLoading({
					mask: true
				});
				uni.getLocation({
					success: res => {
						uni.chooseLocation({
							// latitude: res.latitude,
							// longitude: res.longitude,
							success: (loca) => {
								uni.hideLoading();
								this.play.active_address = loca.name;
								this.play.active_lat = loca.latitude;
								this.play.active_lng = loca.longitude;
								this.$get('index/getAddressByLocation', {
									location: `${loca.latitude},${loca.longitude}`
								}).then(res => {
									if (res.data.status == 0) {
										var result = res.data.result;
										this.play.active_province = result.addressComponent
											.province;
										this.play.active_city = result.addressComponent
											.city;
										this.play.active_district = result.addressComponent
											.district;
									} else {
										this.$util.msg('地址解析失败')
									}
								})
							},

							fail(err) {
								uni.hideLoading();
								console.log(err);
							}

						});
					},
					fail(err) {
						uni.chooseLocation({
							success: (loca) => {
								uni.hideLoading();
								this.info.address = loca.name;
								this.info.lat = loca.latitude;
								this.info.lng = loca.longitude;
								this.$get('index/getAddressByLocation', {
									location: `${loca.latitude},${loca.longitude}`
								}).then(res => {
									if (res.data.status == 0) {
										var result = res.data.result;
										this.info.province = result.addressComponent
											.province;
										this.info.city = result.addressComponent.city;
										this.info.area = result.addressComponent.district;
									} else {
										this.$util.msg('地址解析失败')
									}
								})
							},

							fail(err) {
								uni.hideLoading();
								console.log(err);
							}

						});
					}
				})

			},

			// 提交活动
			onSubmitPlay() {

				if (!this.type_id) {
					return this.$util.msg('请选择搭子类型');
				}

				if (!this.images.length) {
					return this.$util.msg('请上传至少一张活动图片');
				}

				if (!this.play.title) {
					return this.$util.msg('请填写标题');
				}

				// if (!this.play.end_time) {
				// 	return this.$util.msg('请填写截止日期');
				// }

				if (!this.play.people_number) {
					return this.$util.msg('请填写活动人数');
				}

				if (this.is_not_free && !this.play.active_price) {
					return this.$util.msg('请填写价格');
				}


				var exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
				if (this.is_not_free && !exp.test(this.play.active_price)) {
					return this.$util.msg('请填写正确的价格');
				}

				if (!this.play.active_lat) {
					return this.$util.msg('请填写活动位置');
				}

				this.play.image = this.images[0];
				this.play.images = this.images.join(',');
				this.play.type_pid = this.type_pid;
				this.play.type_id = this.type_id;
				this.$post('/loyou/save', this.play).then(res => {
					this.show_back = true;
				});

			},

			chooseGameImage() {
				this.$native.authorize('photos');
				uni.chooseImage({
					count: 1,
					success: (file) => {
						file.tempFilePaths.forEach(element => {
							this.$refs.wCompress.start(element, {
								pixels: 2000000, // 最大分辨率，默认二百万
								quality: 0.6, // 压缩质量，默认0.8
								type: 'png', // 图片类型，默认jpg
								// base64: false, // 是否返回base64，默认false，非H5有效
							}).then(url => {
								this.$upload(url, {
									type: 'picture'
								}).then(res => {
									if (res.status == 2 || res.status == 1) {
										this.game.image = res.result.url;
										this.game.images = res.result.url;
									} else {
										this.$util.msg(res.msg);
									}
								});
							});

						})

					}
				})
			},

			onSubmitGame() {

				if (!this.type_id) {
					return this.$util.msg('请选择搭子类型');
				}

				if (!this.game.title) {
					return this.$util.msg('请填写游戏名称');
				}

				if (!this.game.image) {
					return this.$util.msg('请上传实力展示截图');
				}

				if (!this.game.active_price || !Number(this.game.active_price)) {
					return this.$util.msg('请填写付费金额');
				}

				var exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
				if (this.game.active_price && !exp.test(this.game.active_price)) {
					return this.$util.msg('请填写正确的价格');
				}


				if (!this.game.intro) {
					return this.$util.msg('请填写个人特色');
				}

				this.game.type_pid = this.type_pid;
				this.game.type_id = this.type_id;

				this.$post('/loyou/save', this.game).then(res => {
					this.show_back = true;
				});

			},

			inputVer(e) {
				var exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
				if (!exp.test(e.detail.value)) {

					this.$nextTick(() => {
						let value = e.detail.value;
						// 移除非数字和点
						value = value.replace(/[^\d.]/g, '');
						// 限制只能有一个小数点
						value = value.replace(/^\./g, '');
						value = value.replace(/\.{2,}/g, '.');
						// 限制只能输入两位小数
						value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
						value = value.replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3');
						// 更新输入框的值
						this.play.active_price = value;
					});

				}
			},

			inputVerGame(e) {
				var exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
				if (!exp.test(e.detail.value)) {

					this.$nextTick(() => {
						let value = e.detail.value;
						// 移除非数字和点
						value = value.replace(/[^\d.]/g, '');
						// 限制只能有一个小数点
						value = value.replace(/^\./g, '');
						value = value.replace(/\.{2,}/g, '.');
						// 限制只能输入两位小数
						value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
						value = value.replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3');
						// 更新输入框的值
						this.game.active_price = value;
					});

					return this.$util.msg('请输入正确的金额');
				}
			},

			toCategory(map) {
				this.type_pname = map.type_pname;
				this.type_pid = map.type_pid;
				this.type_name = map.type_name;
				this.type_id = map.type_id;
				this.show_category = false;
			},
			
			cancelCategory(){
				this.show_category = false;
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}

			this.now = new Date().getTime();

		},
		
		onShow() {
			
		}
	}
</script>

<style lang="less" scoped>
	.partner {
		padding: 20rpx 32rpx 32rpx;
	}

	.tab {
		.item {
			width: 336rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 28rpx;
			border: 4rpx solid #FFFFFF;

			i {
				font-weight: 500;
				font-size: 28rpx;
				color: #CCCCCC;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
				flex: 1;
			}

			text {
				color: #CCCCCC;
			}
		}

		#select {
			border: 4rpx solid #F9C3CD;

			i {
				color: #FD2A53;
			}
		}
	}

	.type_input {
		height: 100rpx;
		padding: 0 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;

		.label {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-size: 28rpx;
				color: #131313;
			}
		}

		.container {
			flex: 1;

			.text_label {
				color: #333;
				font-size: 28rpx;
				margin-left: 12rpx;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 8rpx;
			}

			#have {
				color: #333;
			}

			.view {
				font-size: 28rpx;
				color: #999999;
				text-align: right;
				flex: 1;
			}

			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				text-align: right;
			}
		}
	}

	.container {

		.input {
			padding: 0 24rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 20rpx 0;

			.title {
				font-size: 28rpx;
				color: #131313;
				line-height: 28rpx;
				margin-right: 32rpx;
			}

			.inp_content {
				flex: 1;

				text {
					font-size: 28rpx;
					color: #666666;
					line-height: 28rpx;
					margin-left: 8rpx;
				}

				.red {
					color: #FD2A53;
				}

				input {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					text-align: right;
				}

				.view {
					flex: 1;
					font-size: 28rpx;
					color: #999999;
					text-align: right;
				}
			}
		}

		.content {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 34rpx 24rpx 24rpx;
			margin-bottom: 20rpx;

			.header {
				margin-bottom: 22rpx;

				text {
					font-size: 28rpx;
					color: #131313;
				}

				view {
					margin-left: 8rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.image {
				flex-wrap: wrap;

				.photos {
					width: 176rpx;
					height: 176rpx;
					margin: 16rpx;

					image {
						width: 176rpx;
						height: 176rpx;
					}
				}

				.image_item {
					position: relative;
					margin: 16rpx;

					image {
						width: 176rpx;
						height: 176rpx;
						border-radius: 16rpx;
						background: #F3F3F3;
					}

					.detele {
						width: 48rpx;
						height: 48rpx;
						border-radius: 24rpx;
						background: #FFFFFF;
						position: absolute;
						top: -24rpx;
						right: -24rpx;
						z-index: 6;
					}
				}
			}

			.textarea {
				background: #F7F7F7;
				border-radius: 16rpx;
				padding: 24rpx;

				view {
					font-weight: 500;
					font-size: 26rpx;
					color: #999999;
					line-height: 36rpx;
					text-align: right;
				}

				textarea {
					max-width: 100%;
					font-size: 26rpx;
					color: #333;
					line-height: 36rpx;
				}
			}

			.sign {
				margin: 10rpx 0 20rpx;

				.item {
					margin-right: 40rpx;
				}

				text {
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
				}
			}

			.game {
				image {
					width: 312rpx;
					height: 176rpx;
					background: #F7F7F7;
				}
			}
		}

		.list {
			background: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;

			.item {
				height: 96rpx;
				background: #FFFFFF;
				padding: 0 32rpx;

				.left {
					font-size: 28rpx;
					color: #131313;
					margin-right: 32rpx;
				}

				.right {
					flex: 1;

					text {
						flex: 1;
						font-size: 28rpx;
						color: #999999;
						text-align: right;
						margin-right: 16rpx;
						line-height: 28rpx;
					}

					.red {
						font-weight: 500;
						font-size: 28rpx;
						color: #FD2A53;
						margin-left: 8rpx;
						line-height: 28rpx;
					}

					input {
						flex: 1;
						font-size: 28rpx;
						color: #333;
						text-align: right;
					}


				}
			}
		}

		.btn {
			width: 560rpx;
			height: 100rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin: 72rpx auto 0;
		}

	}

	#have {
		color: #333;
	}
</style>